<template>
	<view class="pb-60">
		<!-- <u-cell-item title="报名城市" :class="[iscity?'':'active']" :value="city" :arrow="iscity"
			@click="show=true,type=1"></u-cell-item> -->
		<u-cell-item title="所在地区" :class="[!formatted_address?'':'active']" :value="formatted_address?formatted_address:'请选择所在区域'" :arrow="true"
			@tap="$refs.wanlAddressRef.open()"></u-cell-item>
			<u-cell-item title="详细地址" :class="[address?'':'active']" :arrow="false" >
				<view slot="right-icon" class="input">
					<input type="text"  v-model.trim="address" placeholder="请输入详细地址" />
				</view>
			</u-cell-item>
		<view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
		<u-cell-item title="车辆品牌" :class="[isbrand?'':'active']" :value="model" :arrow="isbrand"
			@click="goOwner"></u-cell-item>
		<u-cell-item title="车牌号" :class="[isplateNo?'':'active']" :arrow="isplateNo" :value="plateNo"
			@tap="plateShow = true">
			<!-- <view slot="right-icon" class="input">
				<input type="text" :disabled="true" v-model.trim="plateNo" placeholder="请输入车牌号" />
			</view> -->
		</u-cell-item>
		<u-cell-item title="性别" :class="[sex?'':'active']" :arrow="false">
			<view slot="right-icon" class="input">
				<u-radio-group v-model="sex" @change="radioGroupChange">
					<u-radio v-for="(item, index) in sexList" :key="index" :label="item.name" :name="item.id"
						activeColor="#4CBD66" size='14'>
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<!-- <input type="text" :disabled="true" v-model.trim="plateNo" placeholder="请输入车牌号" /> -->
			</view>
		</u-cell-item>
		<u-cell-item title="手机号" :class="[mobile?'':'active']" :arrow="false" >
			<view slot="right-icon" class="input">
				<input type="text"  v-model.trim="mobile" placeholder="请输入手机号" maxlength="11" />
			</view>
		</u-cell-item>
		<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow = false" />
		<view class="mlr-36">
			<view class="mt-40 size-32">
				上传证件
			</view>
			<view class="img text-center mt-30">
				<image :src="img1" mode="" @click="chooseImg1"></image>
			</view>
			<view class="size-28 text-center mt-10">
				点击上传<text class="ml-10" style="color: #FF5C50;">行驶证正页</text>
			</view>
			<view class="img text-center mt-60">
				<image :src="img2" mode="" @click="chooseImg2"></image>
			</view>
			<view class="size-28 text-center mt-10">
				点击上传<text class="ml-10" style="color: #FF5C50;">行驶证副页</text>
			</view>
		</view>
		<view class="center mt-40">
			<view class="radio center">
				<view class="radio-circle">

				</view>
			</view>
			<view class="size-26 ml-10">
				阅读并同意代驾司机加盟须知
			</view>
		</view>
		<u-button style="margin: 30rpx 50rpx;border-radius: 50rpx;" type="primary"
			:disabled="!province || !address || !brand || !name || !sex || !mobile ||!plateNo || !imgurl1 || !imgurl2"
			class="mt-60" @click="submit">提交审核</u-button>
		<!-- 选择地区 -->
		<u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
		<wanl-select-address :provinvial="provinvial" ref="wanlAddressRef" :address="addressStr"
			@change="change" @close="close"></wanl-select-address>
	</view>
</template>

<script>
	import {
		upload
	} from '@/common/common.js'
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
	export default {
		data() {
			return {
				type: 1, //1=报名城市，2=居住地
				iscity: true, //是否选择报名城市
				city: '请选择', //报名城市
				sign_areas: '', //市区号
				sign_province: "",
				sign_city: "",
				isaddress: true, //是否选择居住地
				// address: '请选择', //居住地
				areas: '', //区(县)的区号
				province: "",
				city1: "",
				isbrand: true, //是否选择车辆品牌
				model: '请选择车辆品牌', //车辆品牌
				brand: '', //车牌
				name: '', //车型
				isplateNo: true, //是否输入车牌号
				plateNo: '请输入车牌号', //车牌号
				plateShow: false, //自定义车牌号键盘开关
				img1: '/static/img/owner-1.png',
				imgurl1: '',
				img2: '/static/img/owner-2.png',
				imgurl2: '',
				show: false,
				submitbtn: true,
				sex: '', // 性别
				sexList: [{
						name: '男',
						disabled: false,
						id: 1
					},
					{
						name: '女',
						disabled: false,
						id: 2
					}
				],
				province: '', //省份
				city: '', // 城市
				district: '', // 县
				address: '', //详细地址
				lng: '', // 经度
				lat: '', // 纬度
				street: '',
				addressStr: {
					province: {
						id: '',
						name: '',
						pid: ''
					},
					city: {
						id: '',
						name: '',
						pid: ''
					},
					area: {
						id: '',
						name: '',
						pid: ''
					},
					street: {
						id: '',
						name: '',
						pid: ''
					},
				},
				formatted_address: '',
				provinvial: [],
				mobile:'',
				flag: true,
			}
		},
		components: {
			plateInput
		},
		onLoad() {
			uni.$on('brand', res => {
				console.log(res);
				this.brand = res.brand
				this.name = res.name
				this.model = res.brand + ' ' + res.name
				this.isbrand = false
			})
			this.area()
		},
		methods: {
			close() {
				if(!this.flag) {
					this.$refs.wanlAddressRef.setData(this.addressStr);
				}
			},
			change(value) {
				this.flag = false
				if(!value.street.name) return false;
				let address =
					`${value.province.name || ''}${value.city.name || ''}${value.area.name || ''}${value.street.name || ''}`;
				this.formatted_address = address;
				uni.request({
					url: '/member/address/getAddressLatlng',
					data: {
						key: this.$config.amapkey,
						address: address,
						city: value.city.name,
						output: 'JSON'
					},
					success: (res) => {
						this.flag = true
						let location = res.data[0].location.split(',');
						let lng = location[0];
						let lat = location[1];
						this.province = value.province.id;
						this.city = value.city.id;
						this.district = value.area.id;
						this.street = value.street.id;
						this.lng = lng;
						this.lat = lat;
						
						this.addressStr = {
							province: {id:value.province.id,name:value.province.name,pid:0},
							city: {id:value.city.id,name:value.city.name,pid:value.province.id},
							area: {id:value.area.id,name:value.area.name,pid:value.city.id},
							street: {id:value.street.id,name:value.street.name,pid:value.area.id}
						}
						this.$refs.wanlAddressRef.setData(this.addressStr);
					}
				})
			},
			area() {
				uni.request({
					url: '/wanlshop/common/area',
					success: (res) => {
						if (res.data.length > 0) {
							this.provinvial = res.data
						} else {
							this.$wanlshop.msg('数据表area为空，请在后台安装示例插件')
						}
					}
				});
			},
			radioGroupChange(e) {
				console.log('groupChange', e);
			},
			// 填写车牌号
			setPlate(plate) {
				if (plate.length >= 7) this.plateNo = plate;
				this.plateShow = false;
				this.isplateNo = false
			},
			//选择车辆品牌
			goOwner() {
				uni.navigateTo({
					url: '/pages/driver/my/owner/owner'
				})
			},
			confirm(e) {
				console.log(e);
				if (this.type == 1) {
					this.iscity = false
					this.sign_areas = e.city.value + '00'
					this.sign_province = e.province.value + '0000'
					this.sign_city = e.city.value + '00'
					if (e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province
						.label == "重庆市") {
						this.city = e.province.label
					} else {
						this.city = e.province.label + '-' + e.city.label
					}
				} else {
					this.isaddress = false
					this.areas = e.area.value
					this.province = e.province.value + '0000'
					this.city1 = e.city.value + '00'
					if (e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province
						.label == "重庆市") {
						this.address = e.province.label + '-' + e.area.label
					} else {
						this.address = e.province.label + '-' + e.city.label + '-' + e.area.label
					}
				}
			},
			chooseImg1() {
				upload().then(data => {
					this.img1 = data[0].img1
					this.imgurl1 = data[0].img2
				})
			},
			chooseImg2() {
				upload().then(data => {
					this.img2 = data[0].img1
					this.imgurl2 = data[0].img2
				})
			},
			submit() {
				if (this.submitbtn == true) {
					// this.submitbtn = false
					this.$http('/addons/ddrive/user/verified', {
						type: 3,
						truename: '',
						idcard: '',
						front_card_image: '',
						back_card_image: '',
						// sign_areas: this.sign_areas,
						// areas: this.areas,
						// sign_area: this.sign_areas,
						// sign_province: this.sign_province,
						// sign_city: this.sign_city,
						province: this.province, //省份
						city: this.city, // 城市
						district: this.district, // 县
						address:this.address, //详细地址
						lng: this.lng, // 经度
						lat: this.lat, // 纬度
						street: this.street,
						driver_license: '',
						sex:this.sex,
						mobile:this.mobile,
						driver_front_image: '',
						driver_back_image: '',
						card_brand: this.brand,
						card_type: this.name,
						number_plate: this.plateNo,
						card_front_image: this.imgurl1,
						card_back_image: this.imgurl2
					}, "POST").then(data => {
						this.$store.dispatch('updateUserInfo')
						uni.showToast({
							title: '提交成功,请耐心等待',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({})
						}, 1000)
					}).catch(data => {
						this.submitbtn = true
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn {
		height: 96rpx !important;
	}

	/deep/.u-primary-hover {
		background-color: $blue !important;
	}

	/deep/.u-btn--primary--disabled {
		background-color: $bg-1 !important;
	}

	.active {
		/deep/.u-cell__value {
			color: $gray !important;
		}
	}

	.input {
		input {
			text-align: right;
			font-size: 26rpx;
		}
	}

	.img {
		image {
			width: 398rpx;
			height: 254rpx;
		}
	}

	.radio {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;

		.radio-circle {
			width: 22rpx;
			height: 22rpx;
			background: $blue;
			border-radius: 50%;
		}
	}
</style>